/********************************************************************************
 * Copyright (c) 2021,2022 Contributors to the CatenaX (ng) GitHub Organisation
 *
 * See the NOTICE file(s) distributed with this work for additional
 * information regarding copyright ownership.
 *
 * This program and the accompanying materials are made available under the
 * terms of the Apache License, Version 2.0 which is available at
 * https://www.apache.org/licenses/LICENSE-2.0.
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations
 * under the License.
 *
 * SPDX-License-Identifier: Apache-2.0
 ********************************************************************************/

.app-part-relation-host {
  display: block;
  position: absolute;
  // breadcrumb height is about 30px + 1.5rem padding
  top: calc(30px + 1.5rem);
  bottom: 0;
  left: 0;
  right: 0;
}

.part-relation--button-container {
  display: flex;
  flex-direction: column;
  position: absolute;
  right: 32px;
  background: white;
  border-radius: 20%;
  @apply shadow;
}

.part-relation--minimap {
  position: absolute;
  width: 10%;
  min-width: 150px;
  min-height: 30%;
  opacity: 0.3;
  transition: opacity 0.5s, width 0.25s, min-height 0.25s, min-width 0.25s;
  cursor: pointer;

  right: 2rem;
  bottom: 2rem;

  border-radius: 5px;
  box-shadow: 0 0 20px 2px #00000059;

  background-color: white;
  overflow: hidden;

  &:hover {
    opacity: 1;
  }

  & a {
    cursor: unset;
  }
}

.part-relation--container {
  height: 100%;
}

.tree--minimap {
  @apply fill-primary;
  opacity: 0.5;

  &:hover {
    cursor: grab;
  }

  &__closed {
    width: 30px;
    min-width: 30px;
    min-height: 30px;
    overflow: hidden;
    opacity: 1;

    & > svg:first-child {
      width: 0;
      height: 0;
    }

    & > svg:last-child {
      transition: fill 0.3s;

      width: 30px;
      min-height: 30px;

      &:hover {
        @apply fill-primary;
      }
    }
  }

  &__closing {
    cursor: pointer;

    & > rect {
      fill: transparent;
    }

    & > text {
      @apply fill-doveGray;
      font-size: 25px;

      transition: fill 0.3s;

      &:hover {
        @apply fill-primary;
      }
    }
  }
}

.tree--element {
  min-width: 100%;
  height: auto;
  cursor: grab;

  &__grabbing {
    cursor: grabbing !important;
  }

  &__path {
    stroke: #555;
    stroke-opacity: 0.4;
    stroke-width: 1.5;
    fill: none;
  }

  &__circle {
    @apply fill-white;
    -webkit-filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));

    &-done {
      @apply fill-qualityTypeOk;
    }

    &-loading {
      @apply fill-primary;
      animation: MinimapElementLoading 1.5s ease-in-out infinite;
    }

    &-Minor {
      @apply fill-qualityTypeMinor;
    }

    &-Major {
      @apply fill-qualityTypeMajor;
    }

    &-Critical {
      @apply fill-qualityTypeCritical;
    }

    &-LifeThreatening {
      @apply fill-qualityTypeLifeThreatening;
    }
  }

  &__border {
    &-loading {
      @apply stroke-primary;
      @apply fill-primary;

      &-0 {
        animation: TreeElementLoadingAnimation01 2.5s ease-in-out infinite;
      }

      &-1 {
        animation: TreeElementLoadingAnimation02 2.5s ease-in-out infinite;
      }

      &-2 {
        animation: TreeElementLoadingAnimation03 2.5s ease-in-out infinite;
      }
    }

    & > path {
      animation: TreeElementLoadingAnimation 45s infinite linear;
    }

    &-done {
      @apply fill-qualityTypeOk;
    }

    &-Minor {
      @apply fill-qualityTypeMinor;
    }

    &-Major {
      @apply fill-qualityTypeMajor;
    }

    &-Critical {
      @apply fill-qualityTypeCritical;
    }

    &-LifeThreatening {
      @apply fill-qualityTypeLifeThreatening;
    }
  }

  &__arrow-container {
    @apply text-primary;
    -webkit-filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));
    filter: drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.24));

    &:hover {
      @apply text-primaryDark;
    }
  }

  &__arrow {
    fill: currentColor;
  }

  &__text {
    white-space: pre;
    user-select: none;
    text-anchor: middle;
    font-size: 16px;
    font-weight: bold;

    overflow: hidden;
    text-overflow: ellipsis;
    font-family: 'Catena-X Regular', monospace;
  }

  &__closing {
    &-text {
      font-size: 25px;
      @apply fill-white;
    }

    &-circle {
      @apply fill-primary;
    }

    &-animation {
      transition: transform 0.5s;
    }

    &:hover > .tree--element__closing-animation {
      transform: scale(1.5) translate(5px, 0);
    }

    &:hover > .tree--element__closing-circle {
      @apply fill-primaryDark;
    }
  }
}

.loading-stuff {
  transform-origin: center;
  animation: animation 1.2 cubic-bezier(0.25, 0.46, 0.45, 0.94), infinite;
}

@keyframes animation {
  0% {
    stroke-dasharray: 1 98;
    stroke-dashoffset: -105;
  }
  50% {
    stroke-dasharray: 80 10;
    stroke-dashoffset: -160;
  }
  100% {
    stroke-dasharray: 1 98;
    stroke-dashoffset: -300;
  }
}

@keyframes TreeElementLoadingAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes TreeElementLoadingAnimation01 {
  0% {
    transform: rotate(300deg);
  }
  60% {
    transform: rotate(660deg);
  }
  60%,
  100% {
    transform: rotate(660deg);
  }
}

@keyframes TreeElementLoadingAnimation02 {
  0%,
  35% {
    transform: rotate(180deg);
  }
  35% {
    transform: rotate(180deg);
  }
  80% {
    transform: rotate(540deg);
  }
  80%,
  100% {
    transform: rotate(540deg);
  }
}

@keyframes TreeElementLoadingAnimation03 {
  0%,
  55% {
    transform: rotate(60deg);
  }
  55% {
    transform: rotate(60deg);
  }
  100% {
    transform: rotate(420deg);
  }
}
@keyframes MinimapElementLoading {
  0% {
    @apply fill-primary;
    opacity: 0.5;
  }
  50% {
    @apply fill-primaryDark;
    opacity: 1;
  }
  100% {
    @apply fill-primary;
    opacity: 0.5;
  }
}
